@extends('layouts._app')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{asset('static/markdown/css/editormd.css')}}"/>
    <style>
        .layui-btn + .layui-btn {
            margin-left: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .image {
            list-style: none;
        }

        .box {
            width: 730px;
            height: 454px;
            position: relative;
            margin: 50px auto;
        }

        .image li {
            width: 100%;
            height: 454px;
            float: left;
            position: absolute;
            display: none;
        }

        .num {
            position: absolute;
            list-style: none;
            cursor: pointer;
            bottom: 20px;
            left: 281px;
        }

        .num li {
            float: left;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background-color: gray;
            margin: 0 4px;
            text-align: center;
            line-height: 20px;
        }

        .num .current {
            background-color: red;
        }

        .arrow {
            height: 60px;
            width: 30px;
            position: absolute;
            cursor: pointer;
            background-color: black;
            color: white;
            opacity: 0.5;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
            top: 197px;
            display: none;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
    <body class="iframe-h">
    <div class="email-write">
        @include('layouts._flash')
        <div class="layui-form-item">
            <label class="layui-form-label">图片集锦标题：</label>
            <div class="layui-input-block">
                {!! Form::text('',"{$gallery->title}",['readonly','class'=>'layui-input']) !!}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片集锦：</label>
            <div class="layui-input-block">
                <div class="box">
                    <ul class="image">
                        @foreach($gallery->fileAll as $value)
                            <li><img src="{{$value->url}}" alt="{{$gallery->title}}"></li>
                        @endforeach
                    </ul>
                    <ul class="num">
                        @foreach($gallery->fileAll as $key=>$value)
                            <li @if($key == 0) class="current" @endif>{{$key+1}}</li>
                        @endforeach
                    </ul>
                    <div class="left arrow"><</div>
                    <div class="right arrow">></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章内容：</label>
            @if($gallery->user->info->editor == 1)
                <div id="laymd-dome">
                    {!! Form::textarea('',"{$gallery->markdown}",['readonly','class'=>'layui-textarea','style'=>'display:none;']) !!}
                    <script src="{{asset('static/markdown/lib/marked.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/prettify.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/raphael.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/underscore.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/sequence-diagram.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/flowchart.min.js')}}"></script>
                    <script src="{{asset('static/markdown/lib/jquery.flowchart.min.js')}}"></script>
                    <script src="{{asset('static/markdown/editormd.js')}}"></script>
                    <script>
                        $(document).ready(function () {
                            editormd.markdownToHTML("laymd-dome", {
                                htmlDecode: "style,script,iframe",  // you can filter tags decode
                                emoji: true,
                                taskList: true,
                                tex: true,  // 默认不解析
                                flowChart: true,  // 默认不解析
                                sequenceDiagram: true,  // 默认不解析
                                tocm: true,//菜单
                                tocContainer: "",
                                tocDropdown: false
                            });
                        })
                    </script>
                </div>
            @else
                {!! $gallery->html !!}
            @endif
        </div>
        <div class="layui-form-item">
            <a href="{{route('blog.gallery.index')}}" class="layui-btn layui-btn-primary"><i
                    class="layui-icon">&#x1006;</i> 返回</a>
        </div>
    </div>
    <script>
            @if(!$gallery->fileAll->isEmpty())
        var i = 0, timer;
        var sum = $(".image li").length;
        $(function () {
            $(".image li").eq(0).show();

            $(".box").hover(function () {
                $(".arrow").show();
                clearInterval(timer);
            }, function () {
                $(".arrow").hide();
                iLunbo();
            })
            iLunbo();

            $(".arrow").hover(function () {
                clearInterval(timer);
            });
            /*左箭头控制轮播*/
            $(".left").click(function () {
                clearInterval(timer);
                if (i == 0) {
                    i = sum;
                }
                i--;
                startLunbo();
                iLunbo();
            });

            /*右箭头控制轮播*/
            $(".right").click(function () {
                clearInterval(timer);
                if (i == sum - 1) {
                    i = -1;
                }
                i++;
                startLunbo();
                iLunbo();
            });

            /*提示信息变换*/
            $(".num>li").hover(function () {
                clearInterval(timer);
                i = $(this).index();
                console.log(i);
                startLunbo();
            });
        });

        /*自动轮播*/
        function iLunbo() {
            timer = setInterval(function () {
                i++;
                if (i == sum - 1) {
                    i = -1;
                }
                startLunbo();
            }, 2000)
        }

        /*图片轮播和提示信息*/
        function startLunbo() {
            if (i == 6) {
                i = 0;
            }
            $(".image>li").eq(i).fadeIn().siblings().fadeOut();
            $(".num>li").eq(i).addClass("current").siblings().removeClass("current");
        }

        @endif
    </script>
    </body>
@endsection
